<!DOCTYPE html >
<html lang="en" >
<head >
    <meta charset="UTF-8" >
    <title >上传管理</title >
    <link rel="stylesheet" href="../../ck-3pty/bootstrap/css/bootstrap.min.css" >
    <link rel="stylesheet" href="../css/webuploader.css" >
    <script src="../../ck-3pty/jquery/jquery-core.min.js" ></script >
    <script src="../js/webuploader.nolog.js" ></script >
    <script src="../js/ckFastDFS.js" ></script >
    <script src="../../ck-util/ckUI/ckUI.js" ></script >
    <style type="text/css" rel="stylesheet">
        td {
            word-wrap: break-word;
        }
    </style>
</head >
<body >

<input type="hidden" id="contextPath" value="/" />

<div >
    <div >
        <button id="btn1" class="upBtn" >点击上传1</button >
        <button id="btn2" class="upBtn" >点击上传2</button >
        <button id="btn3" class="upBtn" >点击上传3</button >
        <button id="btn4" class="upBtn" >点击上传4</button >
    </div >

    <div style="margin-top: 20px;font-size: 20px;color: #1b6d85" >文件上传列表:</div >
    <table id="resTable" class="table table-striped table-condensed table-bordered" style="table-layout:fixed" >
        <tr >
            <th class="text-center text-info" width="50px">序号</th >
            <th class="text-center text-info" width="280px">文件名</th >
            <th class="text-center text-info" width="100px">文件类型</th >
            <th class="text-center text-info" width="150px">上传路径</th >
            <th class="text-center text-info" width="150px">md5</th >
            <th class="text-center text-info" width="150px">大小</th >
            <th class="text-center text-info" width="120px">上传时间</th >
            <th class="text-center text-info" width="90px">操作</th >
        </tr >
    </table >
</div >
</body >
</html >

<script >

    //------------------------------------CKFASTDFS配置开始--------------------------------------------------------------

    //以下配置展示了多种情况的实例化方式, 请仔细阅读注释

    const baseUri = $.ckGetContext();

    const cfd = new CkFastDFS({ //全量配置
        baseURI: baseUri,
        fastDFSGroup: "group1",
        uploaderConfig: {
            data: {
                demo: "123"
            },
            headers: {
                Authorization: "GOMYCK"
            }
        },
        uploadButton: {
            buttonId: "#btn1",
            multiple: true
        },
        uploadProgressBar: {
            changeBar: function (refer, file, progressVal) {
                console.log("进度条改变: " + refer + "|||" + file.id + "|||" + progressVal);
            }
        },
        uploadListener: {
            //添加文件信息
            appendFileInfo: function (refer, file) {
                console.log("选择文件: " + refer + "|||" + file.id);
            },
            //添加到上传队列之前
            beforeAppendFileInQueued: function (refer, file) {
                console.log("添加到队列之前: " + refer + "|||" + file.id);
                return true;
            },
            //开始上传
            beginUpload: function (refer, file) {
                console.log("开始上传: " + refer + "|||" + file.id);
            },
            //分块上传成功
            chunkUploadSuccess: function (refer, file, result) {
                console.log("分块上传成功:" + refer + "|||" + file.id + "|||" + JSON.stringify(result))
            },
            //上传出错
            uploadError: function (refer, file, reason) {
                console.log("上传失败: " + refer + "|||" + file.id + "|||" + reason);
            },
            //上传成功
            uploadSuccess: function (refer, file, result) {
                console.log("上传成功: " + refer + "|||" + file.id + "|||" + JSON.stringify(result));
            },
            //上传完成
            uploadComplete: function (refer, file) {
                console.log("上传完成: " + refer + "|||" + file.id);
            },
            //全局错误
            error: function (type, tips) {
                console.log("全局错误: " + type + "|||" + tips)
            }
        }
    });

    cfd.addButton("#btn2"); //通过实例添加按钮

    const cfd2 = new CkFastDFS({ //如果需要上传不同的服务器或分组, 重新实例化也是完全没问题的
        baseURI: baseUri,
        fastDFSGroup: "group2",
        uploaderConfig: {},
        uploadButton: {
            buttonId: "#btn3",
            multiple: true
        },
        uploadProgressBar: {
            //....
        },
        uploadListener: {
            //....
        }
    });

    //-----------------------------------CKFASTDFS配置结束---------------------------------------------------------------

    $.ajax({
        url: baseUri + "/upload/manage/list",
        type: "get",
        dataType: "json",
        success: function (data) {
            const result = data.resData.fileList;
            for (let i = 0; i < result.length; i = i + 1) {
                const _temp = result[i];
                let size = $.ckDiv(_temp.size, 1024)+"";
                size = size.substring(0, size.lastIndexOf(".") + 3);
                let tds     =
                `<tr >
                    <td class="text-center text-primary" style="vertical-align: middle;">${i}</td >
                    <td class="            text-muted" style="vertical-align: middle;"><span>${_temp.name}</span></td >
                    <td class="text-center text-muted" style="vertical-align: middle;"><span>${_temp.type}</span></td >
                    <td class="text-center text-muted" style="vertical-align: middle;"><span>${_temp.uploadPath}</span></td >
                    <td class="text-center text-muted" style="vertical-align: middle;"><span>${_temp.fileMd5}</span></td >
                    <td class="text-center text-muted" style="vertical-align: middle;"><span>${size}KB</span></td >
                    <td class="text-center text-muted" style="vertical-align: middle;"><span>${_temp.uploadTime}</span></td >
                    <td class="text-center text-muted" style="vertical-align: middle;">
                        <a target="_blank" href="${data.resData.fileServerUrl}/${_temp.group}/${_temp.uploadPath}" >查看</a >
                        <a target="_blank" download href="${baseUri}/download/chunkDownload/downloadFile?fileMd5=${_temp.fileMd5}" >下载</a >
                        <a class="del" fileMd5="${_temp.fileMd5}" >删除</a >
                        <a class="batchDownload" fileMd5="${_temp.fileMd5}" >批量下载</a >
                    </td >
                </tr >`;
                $("#resTable").append(tds);
            }
            _initDelBtn();
        }
    });

    function _initDelBtn() {
        $('.del').click(function () {
            const self = $(this);
            if (window.confirm("确定要删除吗")) {
                $.post(baseUri + '/upload/manage/delFile', {fileMd5: self.attr('fileMd5')}, function (data) {
                    if (data.isOk) {
                        location.reload();
                    } else {
                        alert(data.resMsg)
                    }
                })
            }
        });

        //这是个例子
        $(".batchDownload").click(function () {
            const self = $(this);
            $.ckPostToNewView(baseUri + "/download/chunkDownload/batchDownloadFileHasGroup",{
                'files[0].fileMd5': self.attr('fileMd5'),
                'files[0].zipSrc': "/demo/"
            });
        });
    }

</script >